<template lang="">
  <div class="particulars">
    <div class="particulars-img">
      <img src="../../static/images/content1.png" alt="" />
      <img src="../../static/images/content1.png" alt="" />
    </div>
    <div class="particulars-content">
      <div class="particulars-content1">抑郁全面评估</div>

      <div style="text-indent: 24px" class="particulars-content2">
        量抑管状念的经重程度及是在治疗中的变化.自评抑修量表(Sclf-rating
        dcprcszion
        zcalc，SDS)由WKZng丁19G5年编制，用丁衡量表的评定时间跨度为最近一恩，评分不受年龄、性别、经济状况等因素影响，但如受试者文化程段较低嗫智力水平较差则不活进行自评-木量表是含有20个项目，分为4级评分的自评量表。J特点是使用简便。并能;相当直观地反陕却B患者的主观总受。主要达用丁具有抑症状的成年人，包柢门诊及住院患者。但是对严重迟缓症状的却评定有困难。冈时，SDS对丁文化程度较低或智力水平稍差的人便用效果不仕。
      </div>
      <div class="particulars-content3">用时：60分钟</div>

      <div class="particulars-content4">项目预览</div>
      <div class="particulars-content5">
        项目链接 <span class="content5-span1">手机版</span>
        <span class="content5-span2">http://eaping.eapchina.nent </span>
        <span class="content5-span3">复制链接</span>
      </div>
      <div class="particulars-content6">二维码</div>
      <img src="../../static/images/erweima.png" alt="" />
      <div class="particulars-button-box">
        <button class="particulars-button1" @click="tosquare()">
          创建项目
        </button>
        <button class="particulars-button2">购买项目</button>
      </div>
      <div class="particulars-content7">联系客服</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    tosquare() {
      this.$emit("reactePorjectBulletbox");
      this.btnVisible = false;
      this.$router.push("/evaluating/square");
    },
  },
};
</script>
<style lang="scss" scoped>
.particulars {
  background-color: #fff;
  display: flex;
  justify-content: center;

  .particulars-img {
    text-align: center;
    flex: 1;
    overflow-y: scroll;
    height: calc(100vh - 56px);
  }
  ::-webkit-scrollbar {
    width: 5px;
    background-color: rgb(232, 232, 232);
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgb(154, 154, 154);
  }

  .particulars-content {
    width: 600px;
    padding: 20px;
    .particulars-content1 {
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 20px;
      font-weight: 600;
    }
    .particulars-content3 {
      margin: 20px 0 40px 0;
      font-weight: 600;
    }
    .particulars-content4 {
      margin: 20px 0;
      border-left: 4px solid skyblue;
      padding-left: 10px;
    }
    .particulars-content5 {
      padding: 5px;
      .content5-span1 {
        border: 1px solid rgb(187, 187, 187);
        padding: 5px;
        margin-left: 20px;
      }
      .content5-span2 {
        border: 1px solid rgb(187, 187, 187);
        padding: 5px;
      }
      .content5-span3 {
        border: 1px solid rgb(187, 187, 187);
        padding: 5px;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .particulars-content6 {
      padding-left: 40px;
      margin-top: 30px;
    }
    img {
      width: 58px;
      position: relative;
      left: 70px;
      top: -20px;
    }
    .particulars-content7 {
      text-align: center;
      margin-top: 20px;
      color: rgb(64, 149, 229);
    }
  }
  .particulars-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    .particulars-button1 {
      width: 450px;
      height: 50px;
      border-radius: 25px;
      color: #fff;
      border: 0;
      background-color: rgb(64, 149, 229);
      cursor: pointer;
    }
    .particulars-button1:hover {
      opacity: 0.8;
    }
    .particulars-button2 {
      width: 450px;
      height: 50px;
      border-radius: 25px;
      color: #fff;
      border: 0;
      background-color: rgb(234, 38, 38);
      cursor: pointer;
    }
    .particulars-button2:hover {
      opacity: 0.8;
    }
  }
}
</style>
